<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
      <el-breadcrumb separator="">
        <el-breadcrumb-item
          ><div class="div1">出库管理</div></el-breadcrumb-item
        >
        <el-breadcrumb-item
          ><div class="div2">未备货订单</div></el-breadcrumb-item
        >
      </el-breadcrumb>
    </div>
    <!-- 面包屑导航 default-expand-all -->
    <div class="content">
      <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
        <el-tab-pane label="微商未备货订单" name="first"></el-tab-pane>
        <el-tab-pane label="客服未备货订单" name="second"></el-tab-pane>
        <el-tab-pane label="品牌未备货订单" name="third"></el-tab-pane>
      </el-tabs>
      <div class="query">
        <!-- <p class="header">查询客户</p> -->
        <div class="polling">
          <el-form
            :inline="true"
            ref="form"
            :model="queryForm"
            label-width=""
            size="mini"
          >
            <el-form-item label="信息">
              <el-input
                placeholder="请输入客户手机号码"
                v-model="queryForm.info"
              ></el-input>
            </el-form-item>
            <div class="selectDate">
              <span>时间</span>
              <div class="picker">
                <el-date-picker
                  v-model="queryForm.date"
                  type="daterange"
                  unlink-panels
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                >
                </el-date-picker>
              </div>
            </div>
            <el-form-item label="订单状态">
              <el-select v-model="queryForm.status" placeholder="选择订单状态">
                <el-option label="订单状态一" value="shanghai"></el-option>
                <el-option label="订单状态二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客服">
              <el-select v-model="queryForm.service" placeholder="请选择客服">
                <el-option label="客户一" value="shanghai"></el-option>
                <el-option label="客户二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="todatail">搜索订单</el-button>
              <el-button type="primary">导出表格</el-button>
            </el-form-item>
          </el-form>
          <div class="table">
            <el-table
              :data="tableData"
              style="width: 100%"
              :expand-row-keys="expends"
              :row-key="getRowKeys"
            >
              <el-table-column type="expand">
                <template slot-scope="props">
                  <el-form label-position="left" class="demo-table-expand">
                    <el-form-item>
                      <p>{{ props.row.name }}</p>
                    </el-form-item>
                    <el-form-item label="">
                      <p>{{ props.row.shop }}</p>
                    </el-form-item>
                  </el-form>
                </template>
              </el-table-column>
              <el-table-column
                label="订单编号"
                prop="id"
                width="100"
              ></el-table-column>
              <el-table-column label="下单时间" prop="id"></el-table-column>
              <el-table-column label="客户" prop="name"></el-table-column>
              <el-table-column label="订单状态" prop="desc"></el-table-column>
              <el-table-column label="总计" prop="desc"></el-table-column>
              <el-table-column label="操作">
                <el-button type="primary">发货</el-button>
                <el-button type="primary">驳回订单</el-button>
              </el-table-column>
            </el-table>
            <!-- 分页start -->
            <div class="page" v-if="tableData.totalNum >= 8">
              <div class="block">
                <span class="demonstration">共{{ tableData.totalPage }}页</span>
                <el-pagination
                  background=""
                  @current-change="handleCurrentChange"
                  :current-page.sync="currentPage1"
                  :page-size="1"
                  layout="prev, pager, next"
                  prev-text="上一页"
                  next-text="下一页"
                  :total="tableData.totalPage"
                >
                </el-pagination>
              </div>
            </div>
            <!-- 分页end -->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeName: "first",
      queryForm: {
        info: "",
        date: "",
        service: "",
        status: "",
      },
      tableData: [],
      expends: [],
      currentPage1: 1,
    };
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    //设置table中的扩展项，展开的id，此处我需要全部展开
    getExpends() {
      var Id = this.tableData.map((item) => item.id);
      this.expends = Id;
    },
    getRowKeys(row) {
      return row.id;
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    todatail() {
      this.$router.push({ name: "logisticsDetail" });
    },
  },
};
</script>

<style scoped lang="scss">
.div1 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb2.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #2d7edf;
}
.div2 {
  margin-left: -16px;
  background: url(../../../assets/breadcrumb1.png);
  width: 120px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  color: #fff;
}
.content {
  background: #fff;
  padding: 10px;
}
.header {
  font-size: 16px;
  color: #2d7edf;
  padding-bottom: 10px;
}
.polling {
  padding: 10px 0;
  padding-left: 15px;
}
.selectDate {
  display: inline-block;
  margin-right: 20px;
  span {
    display: inline-block;
    font-size: 15px;
    margin-right: 15px;
    vertical-align: middle;
  }
  .picker {
    display: inline-block;
    vertical-align: middle;
  }
  /deep/.el-input__inner {
    width: 250px;
    height: 28px;
    line-height: 28px;
  }
  /deep/ .el-date-editor .el-range__icon {
    line-height: 23px;
  }
  /deep/ .el-date-editor .el-range-separator {
    line-height: 23px;
  }
  /deep/.el-date-editor .el-range__close-icon {
    line-height: 22px;
  }
}
.table {
  /deep/.el-table td,
  .el-table th {
    text-align: center;
  }
  /deep/ .el-table th > .cell {
    text-align: center;
    color: rgb(45, 125, 223);
    font-size: 15px;
  }
  /deep/.el-table__row:hover {
    color: rgb(45, 125, 223);
  }
  /deep/.el-button {
    padding: 0px;
    height: 30px;
    width: 80px;
  }
}
.page {
  margin: 20px 0;
  text-align: right;
  width: 100%;
  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }
  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
</style>
